<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
  <script src="/webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
  <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
<div id="vuebox">
  <div class="container" style="margin-top: 50px">
    <table class="table table-striped">
      <h3 class="text-center">帖子内容</h3>
      <form class="form-inline" role="form" style="padding-left: 250px;">
        <div class="form-group" style="padding-left: 20px;">
          <label>帖子标题:</label>
          <input type="text" class="form-control" style="width: 200px" v-model="title">

        </div>
        <div class="form-group"  style="padding-left: 20px;">
          <button type="button" class="btn btn-primary" @click="selectEntry(1)">搜索</button>
        </div>
      </form>
      <thead>
      <tr>
        <th>标题</th>
        <th>内容摘要</th>
        <th>作者</th>
        <th>发布时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in categoryList.list">
        <td>{{item.title}}</td>
        <td>{{item.summary}}</td>
        <td>{{item.author}}</td>
        <td>{{item.createdate}}</td>
        <td>
          <button class="btn-danger"  @click.stop="selehui(item.id)">查看回复</button>
          <button class="btn-danger"  @click.stop="dele(item.id)">删除</button>
        </td>
      </tr>
      </tbody>
    </table>
    <br/>
    <div class="text-right">
      <ul class="pagination">
        <li v-show="categoryList.hasPreviousPage">
          <a href="#" @click.stop="selectEntry(categoryList.prePage)">&laquo;</a>
        </li>
        <li :class="{active:categoryList.pageNum==i}" v-for="i in categoryList.navigatepageNums">
          <a href="#" @click.stop="selectEntry(i)">{{i}}</a>
        </li>
        <li v-show="categoryList.hasNextPage">
          <a href="#" @click.stop="selectEntry(categoryList.nextPage)">&raquo;</a>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
                title:"",
                categoryList:{},
                deleResult:""
            },
            methods:{
                selectEntry:function (id) {
                    axios.get("/seleInvi",{params:{title:this.title,pageNum:id}}).then(res=>{
                        this.categoryList=res.data;
                    })
                },
                selehui(id){
                    window.location.href="/tiaozhuan?id="+id;
                },
                dele:function (id) {
                    axios.get("/deleInvi",{params:{id:id}}).then(res=>{
                        this.deleResult=res.data;
                        if(this.deleResult=="SUCCESS"){
                            this.selectEntry(1);
                        }else{
                            alert(this.deleResult.message);
                        }
                    })
                }
            },
            mounted(){
                this.selectEntry(1);
            }
    })
</script>